<!--
 * @Author: Wang WeiHao
 * @Date: 2024-04-15 14:47:33
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-05-14 14:34:59
 * @Description:
 * @FilePath: \hmcs_map\src\views\spone\frontPage\jin\jin2.vue
-->
<template>
  <div class="w-100 h-100">
    <div class="w-100 h-10 d-flex justify-content-end">
      <lineLabel :shapeColor="'#5CE1FF'" :text="'项目验收合格率'"> </lineLabel>
      <lineLabel
        style="margin-left: 20px"
        :shapeColor="'#B8EB8F'"
        :text="'工程建筑原材料合格率'"
      >
      </lineLabel>
    </div>
    <div class="w-100 h-90">
      <!-- <div id="jin1" style="width: 100%; height: 100%"></div> -->
      <Broken_line
        :echartsId="'zlaq'"
        :xLabel="xLabel"
        :unit="'个'"
        :showFakeLabel="false"
        :echartsData="echartsBrokenData"
        :smooth="false"
        v-if="visible"
        :colorChoose="['#5CE1FF', '#B8EB8F']"
      ></Broken_line>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import lineLabel from "@/components/project/lineLabel.vue";
import { useOptions } from "@/hook/useOptions";

const echartsBrokenData = ref();
const visible = ref(true);
let xLabel = useOptions().tenyear();

const jsonData: any = inject("jsonData");

// watch(
//   () => jsonData.value,
//   (val) => {
//     if (val) {
//       const arr = val.jsgl.zlaq;
//       console.log(arr[0].value);
//       visible.value = false;
//       echartsBrokenData.value = [
//         {
//           label: "项目验收合格率",
//           value: arr[0],
//         },
//         {
//           label: "工程建筑原材料合格率",
//           value: arr[1],
//         },
//       ];
//       nextTick(() => {
//         visible.value = true;
//       });
//     }
//   }
// );
const allData = ref({})

onBeforeMount(async() => {
  // allData.value= await  useFunc().getData("jsgl","zlaq");
  const arr =await useFunc().getData("jsgl","zlaq");
      console.log(arr[0].value);
      visible.value = false;
      echartsBrokenData.value = [
        {
          label: "项目验收合格率",
          value: arr[0],
        },
        {
          label: "工程建筑原材料合格率",
          value: arr[1],
        },
      ];
      nextTick(() => {
        visible.value = true;
      });
});
</script>

<style></style>
